<template>
  <div :id="id" style="height: 100%;">

  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: 'AmountLine',
    props:{
      yType:{
        type:String,
        default:'加元'
      },
      tips:{
        type:String,
        default:'收款总额：$'
      }
    },
    data() {
      return {
        id:Math.random().toString(36)
      }
    },
    methods: {
      init(xData,yData) {
        let that = this
        let option = {
          xAxis: {
            type: 'category',
            data: xData
          },
          tooltip: {
            trigger: 'axis',
            formatter:function(data1){
              let data = data1[0]
              return data.name + '<br/>' +data.marker +that.tips+data.value+that.yType
            }
          },
          yAxis: {
            type: 'value',
            minInterval : 1,
            axisLabel: {
              formatter: '{value} '+that.yType
            }
          },
          series: [{
            data: yData,
            type: 'line',
            symbol: 'circle',
            symbolSize:8,
            itemStyle : {
              normal : {
                color:'#64b0f2'
              }
            }
          }]
        }
        let mycharts = echarts.init(document.getElementById(this.id))
        mycharts.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>
